<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 设置</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="back" data-nav="profile.html">
        <i class="fas fa-chevron-left"></i> 返回
      </div>
      <div class="title">设置</div>
    </div>
    
    <div class="screen-container">
      <!-- Account Settings -->
      <div class="settings-section">
        <h3>账户</h3>
        
        <div class="list-group">
          <div class="list-item" data-nav="#">
            <div class="item-title">个人资料</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">账户安全</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">隐私设置</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">同步与备份</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
        </div>
      </div>
      
      <!-- Habit Settings -->
      <div class="settings-section">
        <h3>习惯设置</h3>
        
        <div class="list-group">
          <div class="list-item">
            <div>
              <div class="item-title">每日重置时间</div>
              <div class="text-secondary">习惯每日重置的时间点</div>
            </div>
            <div class="item-value">凌晨 00:00</div>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">周起始日</div>
              <div class="text-secondary">周统计的起始日</div>
            </div>
            <div class="item-value">周一</div>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">自动归档习惯</div>
              <div class="text-secondary">30天未使用的习惯将自动归档</div>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>
      
      <!-- Notification Settings -->
      <div class="settings-section">
        <h3>通知</h3>
        
        <div class="list-group">
          <div class="list-item">
            <div>
              <div class="item-title">习惯提醒</div>
              <div class="text-secondary">习惯到期提醒</div>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">连续记录提醒</div>
              <div class="text-secondary">连续记录即将中断的提醒</div>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">成就与里程碑</div>
              <div class="text-secondary">达成成就或里程碑时提醒</div>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">社区通知</div>
              <div class="text-secondary">点赞、评论和关注的通知</div>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">勿扰模式</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
        </div>
      </div>
      
      <!-- Appearance -->
      <div class="settings-section">
        <h3>外观</h3>
        
        <div class="list-group">
          <div class="list-item">
            <div class="item-title">深色模式</div>
            <label class="switch">
              <input type="checkbox">
              <span class="slider"></span>
            </label>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">主题颜色</div>
            <div class="theme-preview">
              <div class="theme-color" style="background-color: var(--primary-color);"></div>
              <i class="fas fa-chevron-right text-secondary"></i>
            </div>
          </div>
          
          <div class="list-item">
            <div>
              <div class="item-title">字体大小</div>
            </div>
            <div class="font-size-selector">
              <span class="font-size-option">小</span>
              <span class="font-size-option">中</span>
              <span class="font-size-option active">大</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Premium -->
      <div class="settings-section">
        <div class="premium-card">
          <div class="premium-content">
            <h3><i class="fas fa-crown text-warning"></i> 升级至高级版</h3>
            <p>解锁高级数据分析、无限习惯、自定义主题等功能</p>
            <button class="btn btn-primary">查看会员特权</button>
          </div>
        </div>
      </div>
      
      <!-- About & Support -->
      <div class="settings-section">
        <h3>关于与支持</h3>
        
        <div class="list-group">
          <div class="list-item" data-nav="#">
            <div class="item-title">使用帮助</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">意见反馈</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">隐私政策</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item" data-nav="#">
            <div class="item-title">用户协议</div>
            <i class="fas fa-chevron-right text-secondary"></i>
          </div>
          
          <div class="list-item">
            <div class="item-title">版本</div>
            <div class="text-secondary">1.0.0</div>
          </div>
        </div>
      </div>
      
      <!-- Logout -->
      <div class="settings-section">
        <button class="btn btn-danger btn-block" id="logoutBtn">退出登录</button>
      </div>
      
      <div class="text-center text-secondary mt-20 mb-20">
        <p>© 2025 原子习惯 App</p>
      </div>
    </div>
  </div>

  <style>
    /* Settings specific styles */
    .settings-section {
      margin-bottom: 25px;
    }
    
    .settings-section h3 {
      margin-bottom: 10px;
    }
    
    .item-value {
      color: var(--primary-color);
    }
    
    .theme-preview {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .theme-color {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    
    .font-size-selector {
      display: flex;
      gap: 10px;
    }
    
    .font-size-option {
      padding: 5px 10px;
      background-color: var(--background-color);
      border-radius: 15px;
      font-size: 12px;
    }
    
    .font-size-option.active {
      background-color: var(--primary-color);
      color: white;
    }
    
    .premium-card {
      background: linear-gradient(to right, #8E54E9, #4776E6);
      border-radius: 10px;
      padding: 20px;
      color: white;
    }
    
    .premium-card h3 {
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .premium-card p {
      margin-bottom: 15px;
    }
    
    .premium-card .btn {
      background-color: white;
      color: #8E54E9;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Logout button
      document.getElementById('logoutBtn').addEventListener('click', function() {
        window.location.href = 'login.html';
      });
      
      // Font size selector
      const fontSizeOptions = document.querySelectorAll('.font-size-option');
      fontSizeOptions.forEach(option => {
        option.addEventListener('click', function() {
          fontSizeOptions.forEach(opt => opt.classList.remove('active'));
          this.classList.add('active');
        });
      });
    });
  </script>
  
  <script src="js/app.js"></script>
</body>
</html>
